<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
const active = ref(0)
interface comps {
  label: string,
  icon: string,
  component: any
}

const comp = [
  {
    label: '列表',
    icon: 'bars',
    component: defineAsyncComponent(() => import('../list/ListIndex.vue')) // 组件异步加载
  },
  {
    label: '表单',
    icon: 'orders-o',
    component: defineAsyncComponent(() => import('../form/FormIndex.vue'))
  },
  {
    label: '表格',
    icon: 'apps-o',
    component: defineAsyncComponent(() => import('../table/TableIndex.vue'))
  },
  {
    label: '筛选',
    icon: 'filter-o',
    component: defineAsyncComponent(() => import('../filterate/filteRate.vue'))
  }
] as comps[]


</script>

<template>
  <div class="full" direction="column" justify="space-between">

    <div class="full-content">
      <component :is="comp[active].component" ></component>
    </div>
    <van-tabbar v-model="active" :fixed="false">
      <van-tabbar-item v-for="item in comp" :key="item.label" :icon="item.icon">{{ item.label }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.full-content {
  flex: 1;
  background-color: var(--color-bg-gray);
  overflow: auto;
}
</style>